<template>
    <div class="w-full h-full">
        <div class="w-2/3 h-full m-auto shadow-lg overflow-y-scroll">
            <div class="text-h5">
                总分: {{ query.score }}
            </div>
            <div class="m-3" v-for="item, index in question_list" :key="index">
                <div class=" rounded-md  shadow-md"
                    :class="[item.answer === answers[index] ? 'bg-green-200' : 'bg-red-200']">
                    <div>题目内容:{{ item.content }}</div>
                    <div v-if="item.type === '判断题'">
                        <el-radio-group v-model="answers[index]">
                            <el-radio disabled label="正确">正确</el-radio>
                            <el-radio disabled label="错误">错误</el-radio>
                        </el-radio-group>
                    </div>
                    <div v-else>
                        你的答案：{{ answers[index] }}
                    </div>
                    <div>
                        正确答案:
                        <el-tag>
                            {{ item.answer }}
                        </el-tag>
                    </div>
                    <div>分值:
                        <el-tag>
                            {{ item.score }}
                        </el-tag>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script setup>
import { ref } from 'vue'
import axios from 'axios'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
const route = useRoute()
const query = JSON.parse(route.query.obj)


const question_list = ref(query.question_list)
console.log(question_list.value)
const answers = ref(query.answer_list)


</script> 
 
<style scoped>
/* .bg-green-400 {
    background-color: #68D391 !important
}

.bg-red-400 {
    background-color: #F56565 !important
} */
</style>